<template>
  <div class="menus">
    <a-menu v-model:selectedKeys="menuCurrent" mode="horizontal">
      <a-menu-item key="home">
        <router-link to="/home">首页</router-link>
      </a-menu-item>
      <a-menu-item key="signup">
        <router-link to="/signup">我的报名</router-link>
      </a-menu-item>
      <a-menu-item key="user">
        <router-link to="/user">我的信息</router-link>
      </a-menu-item>
    </a-menu>
    <div class="right-bar">
      <a-avatar :size="64" :src="icon">
        <template #icon><UserOutlined /></template>
      </a-avatar>
      <a-dropdown>
        <a class="ant-dropdown-link" @click.prevent>
          {{name}}
          <DownOutlined />
        </a>
        <template #overlay>
          <a-menu>
            <a-menu-item>
              <a href="javascript:;">退出</a>
            </a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
    </div>
  </div>
</template>

<script>
import { reactive, ref, toRefs } from "@vue/reactivity";
import { DownOutlined,UserOutlined } from "@ant-design/icons-vue";
import {$Http} from "@utils/request.js"
import {getExaminee} from "@apis/user.js"
import { onMounted } from '@vue/runtime-core';
export default {
  components: {
    DownOutlined,
    UserOutlined
  },
  setup() {
    const menuCurrent = ref(["home"]);
    const state = reactive({
      name:"",
      icon:""
    })

    const API_getExaminee = ()=>{
      return $Http.request({
        url:getExaminee,
        method:"POST"
      })
    }

    onMounted(async ()=>{
      let res = await API_getExaminee()
      state.icon = res.data.data.icon
      state.name = res.data.data.name
    })

    return {
      menuCurrent,
      ...toRefs(state)
    };
  },
};
</script>

<style scoped>
.menus{
  display: flex;
  justify-content: space-between;
}
</style>